<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/pagination.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>
</head>

<body>
<div class="nav">
    <img src="pic/logo2.jpg" alt="">
    <span class="blog-title">我的博客系统</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
    <a class="nav-span" href="#" onclick="logout()">注销</a>
</div>

<div class="container">
    <div class="left">
        <div class="card">
            <img src="pic/doge.jpg" alt="">
            <h3></h3>
            <a href="#">GitHub 地址</a>
            <div class="row">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="row">
                <span class="count"></span>
                <span class="category"></span>
            </div>
            <div class="button-container">
                <button class="profile-btn" onclick="goToProfile()">个人中心</button>
            </div>
        </div>
    </div>
    <div class="blog-container">
        <div class="right">

        </div>
        <div class="demo">
            <ul id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
    </div>


</div>
<!-- 添加分页容器 -->

</body>

<script>

    // 个人中心跳转函数
    function goToProfile() {
        location.href = "blog_personalcenter.html";
    }

    getUserInfo("user/getInfo")

    // 获取当前页码，默认第一页

    $.ajax({
        url: "/blog/getListByPage" + location.search,  // 传递页码参数
        type: "get",
        success: function (result) {
            if (result.code == "SUCCESS" && result.data != null && result.data.list) {
                let blogs = result.data.list;  // 假设列表数据在data.list中
                let final = "";
                for (let blog of blogs) {
                    final += '<div class="blog">'
                    final += '<div class="title">' + blog.title + '</div>'
                    final += '<div class="date">' + blog.updateTime + '</div>'
                    final += '<div class="desc">' + blog.content + '</div>'
                    final += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文&gt;&gt;</a>'
                    final += '</div>'
                }
                $('.container .right').html(final);

                $("#pageContainer").jqPaginator({
                    totalCounts: result.data.total,  // 总记录数
                    pageSize: 10,    // 每页条数
                    visiblePages: 5, // 可见页码数
                    currentPage: result.data.pageRequest.pageNum,  // 当前页码
                    first: '<li class="page-item"><a class="page-link">首页</a></li>',
                    prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>',
                    next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>',
                    last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页</a></li>',
                    page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}</a></li>',
                    onPageChange: function (page, type) {
                        if (type == 'change') {
                            // 修正跳转页面为当前博客列表页
                            location.href = "blog_list2.html?pageNum=" + page;
                        }
                    }
                });
            }
        },
        error: function (error) {
            if (error != null && error.status == 401) {
                location.href = "blog_login2.html";
            }
        }
    })
</script>

</html>